<template>
  <div id="address">
    <van-nav-bar
        title="我的收货地址"
        left-text="返回"
        right-text="新增地址"
        left-arrow
        @click-left="onClickLeft"
        @click-right="onClickRight"
    />

    <div class="list" v-if="addresslist.length!=0">
        <div class="card" v-for="(item,index) in addresslist" :key="index" @click="$router.push({path:'/ressdetails',query:{item:item}})">
            <h3>{{item.address}}</h3>
            <span class="name">{{item.name}}</span>
            <span class="phone">{{item.phone}}</span>
            <van-icon name="edit" size="20px" />
        </div>

    </div>
    <div class="nulllist" v-else>
        <h2>地址为空，点击 <span @click="$router.push('/addaddress')">添加地址</span></h2>
    </div>
    
  </div>
</template>

<script>
import { Toast } from 'vant';
import { mapState } from 'vuex';
export default {
  methods: {
    onClickLeft() {
      this.$router.go(-1);
    },
    onClickRight() {
        this.$router.push('/addaddress')
    },
  },
  data() {
    return {
     
    }
  },
  computed:{
    ...mapState('address',['addresslist','disabledList'])
  },
  mounted(){
    console.log(this.addresslist);
  }
}


  
</script>

<style lang="scss" scoped>
    .card{
        width: 100%;
        height: 60px;
        background: aliceblue;
        margin: 10px 0;
        position: relative;
        h3{
            margin-left: 20px;
            margin-bottom: 5px;
        }
        span{
            margin-left: 20px;
            color: #959595;

        }
    }
    .van-icon{
        position: absolute;
        right: 10%;
        top: 40%;
        
    }

    .nulllist h2{
        position: absolute;
        top: 45%;
        left: 10%;
    }
</style>

